@import 'mixins';

html {
  width: 100%;
  height: 100%;
}

.prep-banner-wrapper {
  position: relative;
  .bg {
    width: 100%;
    display: block;
  }
  .banner-box {
    position: absolute;
    top:rem(34);
    left: 50%;
    width: rem(696);
    height: rem(320);
    transform: translateX(-50%);
    .banner-item {
      width: rem(696);
      height: rem(320);
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.prep-one-wrapper {
  width: rem(700);
  margin: rem(-80) auto 0;
  background: #FFFFFF;
  border-radius: rem(30);
  position: relative;
  z-index: 2;
  padding: 0 rem(30);
  .list {
    overflow: hidden;
    margin-top: rem(40);
    .item {
      height: rem(124);
      width: 100%;
      @include flex;
      margin-bottom: rem(12);
      .title {
        width: rem(141);
        height: 100%;
        background: #02C176;
        border-radius: rem(16) 0 0 rem(16);
        @include flex;
        font-size: rem(28);
        color: #FFFFFF;
      }
      .content {
        flex: 1;
        height: 100%;
        box-sizing: border-box;
        padding-left: rem(18);
        padding-right: rem(24);
        @include flex(row,center,flex-start);
        font-size: rem(18);
        color: #333333;
        line-height: 1.5;
        background-color: #f6f6f6;
        border-radius: 0 rem(16) rem(16) 0;
      }
    }
  }
}
.common-title {
  text-align: center;
  padding-top: rem(48);
  .rank {
    width: rem(48);
    height: rem(48);
    line-height: rem(48);
    font-size: rem(29);
    color: #FFFFFF;
    margin: 0 auto rem(18);
    background-color: #02C176;
  }
  .title {
    font-size: rem(32);
    color: #333333;
    line-height: 1.2;
  }
}
.prep-two-wrapper {
  .list {
    @include flex(row,center,space-around);
    flex-wrap: wrap;
    padding: 0 rem(10);
    margin-top: rem(48);
    .item {
      width: rem(327);
      background: #FFFFFF;
      box-shadow: 0 0 rem(9) 0 rgba(#B1B1B1,.4);
      border-radius: rem(10);
      margin-bottom: rem(30);
      padding-bottom: rem(32);
      .icon {
        width: rem(108);
        height: rem(108);
        display: block;
        margin: rem(30) auto rem(18);
      }
      .title {
        font-size: rem(24);
        color: #333333;
        text-align: center;
        line-height: 1.1;
        margin-bottom: rem(16);
      }
      .content {
        width: rem(248);
        margin: auto;
        font-size: rem(18);
        line-height: rem(30);
        height: rem(150);
        color: #666666;
        text-align: justify;
      }
    }
  }
}
.prep-three-wrapper {
  .list {
    @include flex(row,center,flx-start);
    flex-wrap: wrap;
    width: rem(630);
    margin: rem(40) auto 0;
    .item {
      width: rem(190);
      height: rem(70);
      line-height: rem(70);
      background: #F6F6F6;
      border-radius: rem(8);
      text-align: center;
      margin: rem(10);
      font-size: rem(28);
      color: #333333;
      &.active {
        color: #fff;
        background-color: #02C176;
      }
    }
  }
  .btn {
    width: rem(233);
    height: rem(52);
    line-height: rem(52);
    text-align: center;
    margin: rem(30) auto rem(40);
    background: #02C176;
    border-radius: rem(26);
    font-size: rem(20);
    color: #FFFFFF;
  }
  .bg {
    width: 100%;
    height: rem(125);
    line-height: rem(125);
    text-align: center;
    background: #02C176;
    font-size: rem(32);
    color: #fff;
    font-weight: bold;
  }
  .form {
    background-color:#E9E9E9;
    padding: 0 rem(27) rem(54);
    box-sizing: border-box;
    .form-row {
      background-color: #fff;
      border-radius: 0 0 rem(10) rem(10);
      box-sizing: border-box;
      padding: rem(34) rem(24) 0;
      .form-item {
        margin-bottom: rem(35);
        position: relative;
      }
      input {
        display: block;
        width: 100%;
        height: rem(75);
        background: #F1F5F7;
        border-radius: rem(10);
        box-sizing: border-box;
        padding-left: rem(24);
      }
    }
    .arrow {
      width: rem(32);
      height: rem(32);
      position: absolute;
      top: 50%;
      right: rem(20);
      transform: translateY(-50%);
      background-color: #02C176;
      border-radius: 50%;
      &::after {
        content: '';
        width: 0;
        height: 0;
        border-left: rem(10) solid transparent;
        border-right: rem(10) solid transparent;
        border-top: rem(14) solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
  }
}
.prep-four-wrapper {
  .list {
    padding-left: rem(40);
    margin-top: rem(68);
    .item {
      padding-top: rem(36);
      padding-bottom: rem(32);
      box-shadow: 0 0 rem(16) rgba(#000,.1);
      margin-bottom: rem(24);
      .title {
        width: rem(266);
        height: rem(52);
        line-height: rem(52);
        box-sizing: border-box;
        padding-left: rem(30);
        font-size: rem(28);
        color: #fff;
        margin-bottom: rem(20);
        border-radius: 0 rem(26) rem(26) 0;
      }
      .content-box {
        padding-left: rem(30);
        padding-right: rem(50);
        @include flex(row,flex-start,center);
        .dot {
          width: rem(14);
          height: rem(14);
          border-radius: 50%;
          margin-top: rem(8);
          margin-right: rem(10);
        }
        .content {
          flex: 1;
          overflow: hidden;
          color: #3D3D3D;
          font-size: rem(20);
          line-height: rem(30);
          text-align: justify;
        }
      }
    }
  }
  .item {
    &:first-child {
      border-top-left-radius: rem(36);
    }
    &:last-child {
      border-bottom-left-radius: rem(36);
    }
    &:nth-child(odd) {
      .title, .dot {
        background-color: #ff801b;
      }
    }
    &:nth-child(even) {
      .title, .dot {
        background-color: #02c176;
      }
    }
  }
}
.prep-five-wrapper {
  .list {
    margin-top: rem(44);
    padding-bottom: rem(50);
    .item {
      width: rem(373);
      overflow: hidden;
      margin-left: rem(24);
      .cover {
        width: 100%;
        height: rem(186);
        border: rem(1) solid #02C176;
        box-sizing: border-box;
        position: relative;
        border-radius: rem(20);
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .title {
          position: absolute;
          top: 0;
          left: 0;
          height: rem(57);
          line-height: rem(57);
          padding: 0 rem(24);
          background: #FFFFFF;
          border-radius: rem(20) 0 rem(20) 0;
          font-size: rem(26);
          color: #02C176;
        }
      }
      .content {
        font-size: rem(20);
        line-height: rem(30);
        color: #333333;
        margin-top: rem(16);
        text-align: justify;
      }
    }
  }
}


.plan-one-wrapper {
  @extend .prep-one-wrapper;
  .common-title .rank, .list .item .title {
    background-color: #0054FF;
  }
}
.plan-two-wrapper {
  .common-title .rank {
    background-color: #0054FF;
  }
  .list {
    margin-top: rem(60);
    padding: 0 rem(20);
    .item {
      @include flex(row,center,space-around);
      .left {
        width: rem(365);
        height: rem(434);
        position: relative;
        .name {
          font-size: rem(24);
          color: #fff;
          position: absolute;
          top: rem(30);
          left: rem(20);
          transform: rotate(-45deg);
        }
        .cover {
          width: rem(109);
          height: rem(109);
          position: relative;
          margin: rem(45) auto 0;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          .type {
            position: absolute;
            top: 0;
            left: 0;
            font-size: rem(30);
            color: #FFFFFF;
            width: 100%;
            line-height: rem(109);
            text-align: center;
          }
        }
        .title {
          font-size: rem(24);
          color: #333333;
          line-height: 1.1;
          text-align: center;
          margin: rem(20) auto rem(14);
        }
        .content {
          width: 78%;
          margin: auto;
          font-size: rem(18);
          color: #666666;
          line-height: 1.4;
        }
      }
      .right {
        width: rem(303);
        overflow: hidden;
        .sub {
          margin: rem(16) 0;
          width: rem(303);
          height: rem(59);
          text-align: center;
          line-height: rem(59);
          border: rem(1) solid #D2D2D2;
          box-shadow: 0 0 rem(9) 0 rgba(177,177,177,0.38);
          border-radius: rem(10);
          font-size: rem(18);
          color: #666666;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      &.item-1 {
        .left {
          background: url('../../static/image/prep/case-bg1.png') center no-repeat;
          background-size: 100% 100%;
        }
        .right {
          .sub.active {
            background-color: #FF9114;
            border-color: #FF9114;
            color: #fff;
          }
        }
      }
      &.item-2 {
        flex-direction: row-reverse;
        .left {
          background: url('../../static/image/prep/case-bg2.png') center no-repeat;
          background-size: 100% 100%;
        }
        .right {
          .sub.active {
            background-color:#833DF5;
            border-color:#833DF5;
            color: #fff;
          }
        }
      }
      &.item-3 {
        .left {
          background: url('../../static/image/prep/case-bg3.png') center no-repeat;
          background-size: 100% 100%;
        }
        .right {
          .sub.active {
            background-color:#15D09B;
            border-color:#15D09B;
            color: #fff;
          }
        }
      }
    }
  }
}
.plan-three-wrapper {
  @extend .prep-three-wrapper;
  .common-title .rank, .list .item.active, .btn, .bg, .form .arrow {
    background-color: #0054FF;
  }
}
.plan-four-wrapper {
  @extend .prep-four-wrapper;
  .common-title .rank {
    background-color: #0054FF;
  }
  .item:nth-child(even) {
    .title, .dot {
      background-color: #0054FF;
    }
  }
}

.fee-one-wrapper {
  .common-title .rank, .list .item .title {
    background-color: #FF9114;
  }
  .bg-wrap {
    width: rem(670);
    border: rem(1) solid #FF9114;
    border-radius: rem(16);
    margin: auto;
    padding-top: rem(34);
    overflow: hidden;
    .title {
      width: rem(630);
      padding-top: rem(14);
      margin: 0 auto rem(44);
      @include flex;
      font-weight: bold;
      background: url('../../static/image/prep/f-bg.png') center top no-repeat;
      background-size: 100% auto;
      span {
        padding: 0 rem(4);
        font-size: rem(40);
        &.left {
          color: #FF9114;
        }
        &.right {
          color: #FF560C;
        }
      }
    }
    .txt {
      display: inline-block;
      color: #FDFEFE;
      font-size: rem(28);
      height: rem(68);
      line-height: rem(68);
      padding-left: rem(60);
      padding-right: rem(24);
      background: linear-gradient(to right, #ffd00a, #ff4b0d);
      position: relative;
      z-index: 2;
      &::after {
        content: '';
        width: 0;
        height: 0;
        border-right: rem(30) solid transparent;
        border-bottom: rem(68) solid #ff4b0d;
        position: absolute;
        top: 0;
        left: 100%;
      }
    }
    .tt {
      padding: rem(70) rem(50) rem(50) rem(30);
      border-radius: rem(14);
      box-shadow: 0 0 rem(20) 0 rgba(#000,.2);
      margin-right: rem(36);
      margin-bottom: rem(56);
      margin-top: rem(-60);
      @include flex(row,flex-start,center);
      .dot {
        width: rem(16);
        height: rem(16);
        background-color: #FFCD0A;
        margin-right: rem(15);
        margin-top: rem(7);
      }
      .cot {
        flex: 1;
        overflow: hidden;
        font-size: rem(18);
        color: #333333;
        line-height: rem(30);
        text-align: justify;
      }
    }
  }
}
.fee-two-wrapper {
  .common-title .rank {
    background-color: #FF9114;
  }
  .line {
    width: 100%;
    height: rem(21);
    background: #F8F8FA;
    margin-top: rem(40);
  }
  .head {
    width: 100%;
    box-sizing: border-box;
    padding: 0 rem(24);
    height: rem(110);
    @include flex(row,center,space-between);
    .bt {
      font-size: rem(40);
      color: #323232;
      font-weight: bold;
      white-space: nowrap;
    }
    .wrap {
      width: rem(368);
      height: rem(51);
      background: #F8FAFD;
      border-radius: rem(26);
      box-sizing: border-box;
      padding-left: rem(50);
      @include flex;
      .icon {
        width: rem(24);
        height: rem(24);
        margin-right: rem(24);
      }
      .input {
        flex: 1;
        overflow: hidden;
        height: rem(51);
        background: transparent;
        font-size: rem(20);
      }
    }
  }
  .list {
    padding: 0 rem(24);
    @include flex(row,flex-start,center);
    .navs {
      width: rem(172);
      background: #F8F8FA;
      margin-right: rem(20);
      font-size: rem(28);
      line-height: rem(80);
      text-align: center;
      padding: rem(10) 0;
      color: #666;
      .active {
        color: #000000;
        font-weight: bold;
        position: relative;
        background-color: #fff;
        &::after {
          content: '';
          width: rem(12);
          height: 100%;
          background: #FF9114;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .content {
      flex: 1;
      overflow: hidden;
      background: #FF9114;
      border-radius: 10px;
      box-sizing: border-box;
      padding: rem(24);
      .intro {
        background: #fff;
        border-radius: rem(10);
        padding: rem(20);
        box-sizing: border-box;
        text-align: justify;
        font-size: rem(20);
        line-height: rem(30);
        color: #333333;
        margin-bottom: rem(20);
      }
      .wrap {
        background: rgba(#FFFFFF,.3);
        border-radius: 20px;
        padding: rem(12);
        box-sizing: border-box;
        .top {
          font-size: rem(28);
          color: #FFFFFF;
          @include flex(row,flex-start,center);
          span {
            padding-top: rem(12);
          }
          img {
            width: rem(162);
          }
        }
        .table {
          background: #FFFFFF;
          box-shadow: 0 rem(2) rem(18) 0 rgba(255,145,20,0.74);
          border-radius: rem(20);
          box-sizing: border-box;
          padding: rem(50) rem(20);
          table {
            line-height: 1.5;
            width: 100%;
            color: #333333;
            text-align: center;
            span {
              padding: rem(14) 0;
              display: block;
            }
            tr {
              border-bottom: rem(1) solid #FF9114;
              &:last-child {
                border-bottom: none;
              }
            }
            .left{
              font-size: rem(18);
              border-right: rem(1) solid #FF9114;
            }
            .right {
              font-size: rem(16);
            }
          }
        }
      }
    }
  }
}
.fee-three-wrapper {
  @extend .prep-three-wrapper;
  .common-title .rank, .list .item.active, .btn, .bg, .form .arrow {
    background-color: #FF9114;
  }
}


.abroad-special-wrapper {
  padding: rem(30) rem(30) 0;
  @extend .study-special-wrapper;
  .spec-box {
    margin-bottom: rem(36);
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.navigate-bar {
  height: rem(123);
  background: #F8F8FA;
  box-sizing: border-box; font-weight: bold;
  padding-left: rem(24);
  padding-right: rem(28);
  @include flex;
  a {
    @include flex(row,center,flex-start);
  }
  .arrow-box {
    transform: rotate(180deg);
    .arrow {
      @include arrow(36, #02C176, 2);
    }
  }
  .title {
    flex: 1;
    overflow: hidden;
    font-size: rem(30);
    color: #02C176;
    box-sizing: border-box;
    padding-left: rem(4);
  }
  button {
    padding: 0 rem(30);
  }
}

.empty-wrap {
  padding: rem(240) 0;
  img {
    display: block;
    width: rem(260);
    height: rem(289);
    margin:0 auto rem(36);
  }
  .txt {
    font-size: rem(26);
    color: #333;
    text-align: center;
  }
}

.major-subject-wrapper {
  @extend .study-subject-wrapper;
  padding-top: 0;
  .module-box {
    padding: rem(24);
    .list {
      margin-top: 0;
      box-shadow: 0 0 rem(9) 0 rgba(#000,.2);
      padding: rem(50) rem(32) rem(34);
      border-radius: rem(20);
    }
  }
}

.main-country-wrapper {
  @extend .study-country-wrapper;
  background-color: #F8F8FA;
  .module-box {
    overflow: hidden;
    background-color: #fff;
    .list {
      display: block;
      overflow: hidden;
      .item {
        width: (100% / 6);
        float: left;
        margin-bottom: rem(42);
      }
    }
  }
}

.want-read-wrapper {
  @extend .study-read-wrapper;
  .module-box {
    padding: 0 rem(30);
    overflow: hidden;
  }
  .menu-list {
    @include flex(row,center,space-around);
    padding-bottom: rem(36);
    .item {
      @include flex(column);
      .icon {
        width: rem(118);
        height: rem(118);
        margin: rem(20) auto;
      }
      .title {
        font-size: rem(28);
        color: #333333;
        line-height: 1.2;
      }
    }
  }
  .func-list {
    background-color: #F8F8FA;
    padding: rem(40) rem(40);
    box-sizing: border-box;
    @include flex(row,center,space-around);
    .item {
      @include flex(column);
      .icon {
        width: rem(80);
        height: rem(80);
        margin-bottom: rem(16);
      }
      .title {
        color: #333333;
        line-height: 1.2;
        font-size: rem(28);
      }
    }
  }
}
.main-mode-wrapper {
  @extend .study-mode-wrapper;
  .module-box {
    padding: rem(24);
    .list {
      margin-top: 0;
      box-shadow: 0 0 rem(9) 0 rgba(#000,.2);
      padding: rem(50) rem(12) rem(14);
      border-radius: rem(20);
      .item {
        @include flex(column);
      }
    }
  }
}
.main-area-wrapper {
  @extend .study-area-wrapper;
  .list {
    margin-top: 0;
    padding: rem(24);
  }
}
.regist-wrapper {
  background-color: #F8F8FA;
  .list {
    background-color: #fff;
    @include flex(row,center,space-around);
    padding: rem(60) 0;
    .item {
      @include flex(column);
      .icon {
        width: rem(80);
        height: rem(80);
        margin-bottom: rem(16);
      }
      .title {
        font-size: rem(28);
        color: #333333;
      }
    }
  }
}

.news-list {
  background-color: #fff;
  padding: rem(28) rem(28) 0;
  box-sizing: border-box;
  .item {
    padding: rem(30);
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(#02C176,.08), rgba(#02C176,.01), rgba(#02C176,0));
    margin-bottom: rem(20);
    border-radius: rem(16);
    box-shadow: 0 0 rem(8) 0 rgba(#000,.1);
    &:last-child {
      margin-bottom: 0;
    }
    .head {
      @include flex(row,center,space-between);
      margin-bottom: rem(20);
      .name {
        @include flex(row,center,flex-start);
        span {
          font-size: rem(28);
          color: #000000;
          margin-right: rem(20);
        }
        .arrow-box {
          width: rem(26);
          height: rem(26);
          border-radius: 50%;
          background-color: #02C176;
          .arrow {
            @include arrow(26,#fff);
          }
        }
      }
      .tag {
        font-size: rem(20);
        color: #036A61;
      }
    }
    .content {
      font-size: rem(18);
      color: #666666;
      line-height: 1.6;
      text-align: justify;
    }
  }
}

